<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="网易严选" fixed placeholder>
      <template #left>
        <router-link to="/home" class="home" style="color: #000">
          <van-icon name="wap-home-o" />
        </router-link>
      </template>
      <template #right>
        <van-icon name="search" @click="toSearch" />
        <van-icon name="shopping-cart-o" @click="toCart" />
      </template>
    </van-nav-bar>
    <!-- 顶部标签页 -->
    <van-sticky :offset-top="46">
      <van-tabs v-model="active" class="headerNav" @click="changeData">
        <van-tab
          v-for="item in categoryL2List"
          :key="item.categoryId"
          :title="item.name"
          :name="item.id"
        />
      </van-tabs>
    </van-sticky>

    <header class="hd" v-if="categoryL2List[0]">
      <p>{{ categoryL2List[0].name }}</p>
    </header>
    <!-- 商品主题部分 -->

    <ul>
      <li v-for="item in itemList" :key="item.id" @click="toDtail">
        <img :src="item.listPicUrl" v-lazy="item.listPicUrl" alt="" />
        <!-- 红包 -->
        <div class="redPacket" v-if="item.promDesc">
          <!-- 左侧图标 -->
          <svg
            t="1656746465698"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2592"
            width="16px"
            height="16px"
          >
            <path
              d="M701.6 424c1 7.9 2.4 15.8 2.4 24 0 106-86 192-192 192s-192-86-192-192c0-8.2 1.4-16 2.4-24-56.6-36.5-102.2-88.5-130.4-150.3l0 536.9c0 47.1 38.2 85.3 85.3 85.3l469.3 0c47.1 0 85.3-38.2 85.3-85.3L831.9 273.8C803.8 335.5 758.1 387.6 701.6 424z"
              p-id="2593"
              fill="#dd1a21"
            ></path>
            <path
              d="M342.8 359.1C375 298.1 438.2 256 512 256s137 42.1 169.2 103.1c66.1-49 111.1-124.9 116.9-212.1-14.4-11.2-31.7-19-51.4-19L277.3 128c-19.7 0-37 7.8-51.4 19C231.7 234.1 276.7 310.1 342.8 359.1z"
              p-id="2594"
              fill="#dd1a21"
            ></path>
            <path
              d="M611.8 459c10.1 0 17.4-7.3 17.4-17.4s-7.3-17.4-17.4-17.4l-68.8 0 68.9-68.9c6.9-6.9 6.9-17.6 0-24.5-6.9-6.9-17.6-6.9-24.5 0l-75.2 75.1-75.4-77.4c-6.9-6.9-17.6-6.9-24.5 0-3.4 3.4-5.2 7.8-5.2 12.3 0.1 4.6 1.9 8.9 5.2 12.1l69.2 71.2-69.1 0c-10.1 0-17.4 7.3-17.4 17.4s7.3 17.4 17.4 17.4l82.3 0 0 31.6-82.3 0c-10.1 0-17.4 7.4-17.4 17.5s7.3 17.4 17.4 17.4l82.3 0 0 49.1c0 10.1 7.3 17.4 17.4 17.4s17.4-7.3 17.4-17.4l0-49.1 82.3 0c10.1 0 17.4-7.3 17.4-17.4s-7.3-17.5-17.4-17.5l-82.3 0L529.5 459 611.8 459z"
              p-id="2595"
              fill="#dd1a21"
            ></path>
          </svg>
          <!-- 红包右侧文字 -->
          <div>{{ item.promDesc }}</div>
        </div>
        <p class="title">{{ item.name }}</p>
        <div class="price">
          <span class="now"
            >￥ <i>{{ item.retailPrice }}</i></span
          >
          <span class="old"
            >￥<i>{{ item.sortOriginPrice }}</i></span
          >
        </div>
        <div class="activity">
          <div class="left">
            {{
              item.finalPriceInfoVO.banner &&
              item.finalPriceInfoVO.banner.title != ""
                ? item.finalPriceInfoVO.banner.title
                : "特价"
            }}
          </div>
          <div class="right">
            {{
              item.finalPriceInfoVO.banner
                ? item.finalPriceInfoVO.banner.content
                : "限时优惠"
            }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "GoodsList",
  data() {
    return {
      itemList: [], //下边展示商品列表
      categoryL2List: [],
      navId: "",
      subId: "",
      active: 0,
    };
  },
  methods: {
    // 获取商品列表
    async getGoodsList() {
      // 获取时间戳
      let timet = new Date().getTime();

      const result = await this.$ajax.category.reqCommodity(
        timet,
        this.navId,
        this.subId
      );
      //   console.log(result);
      this.itemList = result.data.categoryItems.itemList;
      this.categoryL2List = result.data.categoryL2List;
    },
    // 去详情页
    toDtail() {},
    toSearch() {
      this.$router.push("/search");
    },
    //
    toCart() {
      this.$router.push("/cart");
    },
    // 点击顶部导航栏的回调
    changeData(name, title) {
      // 获取当前点击导航栏id
      this.subId = name;
      this.getGoodsList();
    },
  },
  mounted() {
    let { navId, subId } = this.$route.query;
    this.navId = navId;
    this.subId = subId;
    this.getGoodsList();
    // 获取query参数
  },
};
</script>

<style lang="less">
// overflow:hidden;
.van-icon {
  font-size: 25px;
  color: black !important;
  
}
// 商品列表位置
.headerNav {
  border-bottom: 1px solid #d9d9d9;
}
.hd {
  width: 100%;
  height: 55px;
  border-top: 10px solid #eeeeee;
  p {
    line-height: 55px;
    text-align: center;
    font-size: 14px;
  }
}
ul {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
  font-size: 14px;
  li {
    width: 48%;
    margin-bottom: 20px;
    position: relative;
    img {
      width: 100%;
      border-radius: 10px;
    }
    .redPacket {
      border: 1px solid #dd1a21;
      background-color: #fff;
      width: 69.5px;
      height: 20px;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      padding: 0 5px;
      position: absolute;
      top: 130px;
      left: 10px;
      // img {
      // }
      div {
        font-size: 12px;
        line-height: 20px;
      }
    }
    .title {
      margin-top: 10px;
      line-height: 16px;
      font-size: 14px;
    }
    .price {
      margin-top: 7px;
      .now {
        font-size: 12px;
        i {
          font-size: 18px;
          color: #fb2639;
          font-weight: bold;
        }
      }
      .old {
        margin-left: 5px;
        font-size: 12px;
        color: #666;
        text-decoration: line-through;
      }
    }
    .activity {
      display: flex;
      width: 100%;
      background-color: #ffe9eb;
      border-radius: 10px;
      padding: 3px 0;
      .left {
        margin-right: 8px;
        color: #fff;
        background-color: #fb2639;
        border-radius: 5px;
        // padding: 2px 5px;
        font-weight: bold;
        font-size: 12px;
        white-space: nowrap;
        height: 20px;
        line-height: 20px;
      }
      .right {
        color: #fb2639;
        font-size: 12px;
        font-weight: 700;
        padding: 2px 0px;
        height: 20px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>